import { useState, useEffect } from "react";
import { resourcePath } from "../../../../../../../../utils/resource";
import PanelLeft from "../../../../../../../common/PanelLeft";
import { InputNumber, Drawer,Radio, Space } from "antd";
import Wzcb from "../Wzcb";

export default function Jzzy(props){
    const [radius, setRadius] = useState();
    const [isChecked, setIsChecked] = useState(false);
    const [OpenWzcb, setOpenWzcb] = useState(false);

    const showDrawerWzcb = () => {
        setOpenWzcb(true)
      };
      const onCloseWzcb = () => {
        setOpenWzcb(false);
      };

    return <PanelLeft>
        <div style={{
                width: 350,
                position: "absolute",
                left: 70,
                top: 30,
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                pointerEvents: 'auto',
                borderRadius: 8
            }} className="jzzy-layout">
            <div style={{
                fontSize: 20,
                fontWeight: "bold"
            }} className='jzzy-top'>
                <div style={{
                    background: `url(${resourcePath.blockTitleBg})`,
                    height: '100%',
                    backgroundSize: '100% 100%',
                    fontSize: 18,
                    lineHeight: '36px',
                    paddingLeft: 12,
                    fontWeight: "bold"
                }}>救灾资源</div>
            </div>

            <div className="jzzy-center">
                <div style={{
                        padding: 12,
                    }}>
                        <Space>
                            <Radio.Group size='small' value={radius} onChange={e => {
                                setRadius(e.target.value)
                            }} buttonStyle="solid">
                                <Radio.Button value={5}>5km</Radio.Button>
                                <Radio.Button value={10}>10km</Radio.Button>
                                <Radio.Button value={15}>15km</Radio.Button>
                                <Radio.Button value={20}>20km</Radio.Button>
                            </Radio.Group>

                            <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                                width: 120
                            }} onChange={value => {
                                setRadius(value)
                            }} />
                        </Space>
                </div>
            </div>
            
            <div className="jzzy-bouttom">
                <div style={{
                    border: '1px solid #045484',
                    height: '40px',
                    width: '100%'
                }}>
                    <input id="checkbox" type="checkbox" onClick={showDrawerWzcb} style={{
                       position: 'relative',
                       marginTop: '3%',
                       width: '100px',
                       height: '20px',
                       left: '-20px',
                       backgroundColor: 'transparent',
                       border: '1px solid black', 
                    }}/>救灾物资储备库
                    <Drawer title="救灾物资储备库" placement="right" onClose={onCloseWzcb} open={OpenWzcb}>
                        <Wzcb />
                    </Drawer>
                </div>
            </div>
        </div>
    </PanelLeft>
    
}